<template>
  <section>
    <div class="custorm--modelbox marketlottery-edit">
      <div class="renohome-right-nav flex-row flex-justify-c flex-align-c">
        <renohome-right-nav
          :custormItemData="custormItemData"
          @rightNavChange="rightNavChange"
          :showChange="'1'"
        ></renohome-right-nav>
      </div>
      <section v-if="nrActive">
        <div class="edit-form-item">
          <!-- <div class="form-label">选择抽奖活动</div>
          <el-radio-group v-model="custormItemData.params.choostype">
            <el-radio label="1">按活动选择</el-radio>
            <el-radio label="3">自动添加</el-radio>
          </el-radio-group> -->
          <div class="form-label">是否展示赞助商</div>
          <el-radio-group v-model="custormItemData.params.showStore">
            <el-radio label="1">开启</el-radio>
            <el-radio label="2">关闭</el-radio>
          </el-radio-group>

          <div v-if="custormItemData.params.choostype==3" class="inner">
            <div class="form-label" style="margin-top: 20px;">活动状态</div>
            <div class="flex-row flex-align-c" style="width:100px;">
              <el-radio-group v-model="custormItemData.params.activetype" class="el-tab">
                <el-radio label="1">所有</el-radio>
                <el-radio label="2">未开始</el-radio>
                <el-radio label="3">进行中</el-radio>
                <el-radio label="4">已结束</el-radio>
              </el-radio-group>
            </div>
          </div>

          <div v-if="custormItemData.params.choostype==3" class="inner">
            <div class="form-label" style="margin-top: 20px;">显示条数</div>
            <div class="flex-row flex-align-c">
              <el-slider
                :show-tooltip="false"
                style="width: 70%;margin-left:10px;"
                v-model="listitem"
                input-size="mini"
                :max="20"
                :min="1"
              ></el-slider>
              <div class="coupon-showslider">{{custormItemData.params.listitem}}个</div>
            </div>
          </div>
        </div>

        <div class="edit-form-item" v-if="custormItemData.params.choostype != 3">
          <div class="form-label mb-20">活动链接</div>
          <el-form
            label-width="50px"
            size="mini"
            class="goodsset"
            label-position="right"
            style="margin-top:20px;"
          >
            <el-form-item label="链接">
              <div class="item-inner flex-row">
                <div class="readonly-div" @click="uploadtoggle('link')">
                  <div class="readonly ivu-input-wrapper ivu-input-wrapper-default ivu-input-type">
                    <input
                      autocomplete="off"
                      spellcheck="false"
                      type="text"
                      placeholder="请选择链接"
                      readonly="readonly"
                      class="ivu-input ivu-input-default"
                      :value="custormItemData.params.link"
                    />
                  </div>
                  <i class="icon icon-fujian readonly-icon" style="left: 12px;margin-top:-3px;"></i>
                </div>
              </div>
            </el-form-item>
            <el-form-item label>
              <div class="flex-row choose-item-lits">
                <div
                  v-for="(item, index) in custormItemData.data"
                  :key="index"
                  class="choose-item-child"
                >
                  <img :src="item.image[0]['file_path']" alt class="small" />
                  <i
                    class="delete el-icon-close"
                    @click="delItemList({data:custormItemData.data,index})"
                    style="font-size: 16px;"
                  ></i>
                </div>
              </div>
            </el-form-item>

          </el-form>
           <div class v-if="custormItemData.data.length>0">
              <div class="allChoose">
                <div class="form-label mb-20">选择期数</div>
                <el-checkbox
                  v-model="checkAll"
                  :indeterminate="isIndeterminate"
                  @change="handleCheckAllChange"
                >全选</el-checkbox>
              </div>

                <div class="">
                  <el-checkbox-group v-model="custormItemData.params.peridos" @change="qishuChange">
                   <div class="allchoose">
                      <div
                      class="chooseOne"
                      v-for="(pridrosItem,pridrosIndex) in custormItemData.data[0].luck_periods"
                      :key="pridrosIndex"
                    >
                      <el-checkbox
                        border

                        size="small"
                        :label="pridrosItem.luck_period_id"

                      >第{{pridrosItem.luck_period_id}}期</el-checkbox>
                    </div>
                   </div>
                  </el-checkbox-group>
                </div>

            </div>
        </div>

        <!-- <div class="edit-form-item" v-if="custormItemData.style.display==2">
                <div class="form-label">显示内容</div>
                <el-checkbox true-label="1" false-label="2" v-model="custormItemData.style.oldprice">原价</el-checkbox>
                <el-checkbox v-if="custormItemData.style.display==2" true-label="1" false-label="2" v-model="custormItemData.style.progress">秒杀进度表</el-checkbox>
        </div>-->
      </section>

      <section v-if="fgActive">
        <div class="es-form-item goods" style="border-bottom: 0px;">
          <!-- <div
            class="item-inner block"
            style="transform: scale(0.8) translate(-50px, -20px); width: 375px;"
          ><label
              class="button-img block"
              @click="changePattern(1)"
              v-bind:class="{active:custormItemData.style.display==1}"
              style="border-color: rgb(237, 237, 237);"
            ><input
                type="radio"
                value="style1"
                class="opacity-0"
              >

              <div class="es-seckill-group style-row">
                <div class="flex es-seckill-title">
                  <p class="title">抽奖活动</p>
                  <p>更多 <i class="el-icon-arrow-right"></i></p>
                </div>
                <div class="group">
                  <div>
                    <div
                      v-for="(item, index) in custormItemData.params.defaultData"
                      :key="index"
                      class="es-seckill-col"
                    >
                      <div class="image">
                        <img
                          :src="`${custormItemData.params.choostype == '1'?getPath('default_picture.png'):item.edit?getPath(item.edit.thumb):item.images[0]}`"
                          alt=""
                          draggable="false"
                        ><span class="group-img-btn">抽奖中</span></div>
                      <div class="detail">
                        <p class="title  line-hide">这里是商品标题</p>
                        <div class="subtitle line-hide flex-row flex-justify-b">
                          <span class="sub-price"><span class="icon">中奖数：</span>20</span>
                        </div>
                        <div class="subtitle line-hide flex-row flex-justify-b flex-align-c">
                          <span class="sub-price line-through"><span
                              class="icon"
                              style="white-space: nowrap;"
                            >人数满20人自动开奖</span></span>
                          <div class="group-btn">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </label>
          </div>

          <div
            class="item-inner block"
            style="transform: scale(0.8) translate(-50px, -60px); width: 375px;"
          ><label
              class="button-img block"
              @click="changePattern(2)"
              v-bind:class="{active:custormItemData.style.display==2}"
              style="border-color: rgb(237, 237, 237);padding:0;"
            ><input
                type="radio"
                value="style2"
                class="opacity-0"
              >

              <div class="es-seckill-group style-col">
                <div class="flex es-seckill-title">
                  <p class="title">抽奖活动</p>
                  <p>更多 <i class="el-icon-arrow-right"></i></p>
                </div>
                <div class="group">
                  <div>

                        <div
                        v-for="(item, index) in custormItemData.params.defaultData"
                        :key="index"
                        class="es-seckill-col flex-row flex-align-c"
                        >
                        <div class="image">
                            <img
                            :src="getPath('default_picture.png')"
                            alt=""
                            draggable="false"
                            ></div>
                        <div class="detail flex-col flex-justify-b">
                            <div class="flex-col">
                            <p class="title  line-hide">这里是商品标题</p>
                            </div>
                            <div class="sales-num col-num">
                            <div class="flex-row flex-justify-b flex-align-c">
                                <div class="flex-col">
                                <span class="sub-price"><span class="icon">中奖数</span>20份</span>
                                <p class="orders-gray">人数满20人自动开奖</p>
                                </div>
                                <div
                                class="flex-row flex-align-c"
                                style="align-self: flex-end;"
                                >
                                <div class="group-btn col-list"><span>去抽奖</span></div>
                                </div>
                            </div>
                            </div>
                        </div>
                        </div>

                    </div>

                    </div>
                </div>
                </label>
          </div>-->
          <div
            class="luckStyleTwo"
            @click="changePattern(4)"
            v-bind:class="{myActive:custormItemData.style.display==4}"
          >
            <img class="luckStyleTwoImg" src="@/assets/image/luckstyle2.png" alt />
          </div>
          <div
            class="item-inner block"
            style="transform: scale(0.8) translate(-50px, -20px); width: 375px;"
          >
            <label
              class="button-img block"
              @click="changePattern(3)"
              v-bind:class="{active:custormItemData.style.display==3}"
              style="border-color: rgb(237, 237, 237);"
            >
              <input type="radio" value="style1" class="opacity-0" />

              <div class="es-seckill-group style-row">
                <div class="group">
                  <div>
                    <div
                      v-for="(item, index) in custormItemData.params.defaultData"
                      :key="index"
                      class="es-seckill-col"
                    >
                      <div class="image">
                        <img
                          :src="`${custormItemData.params.choostype == '1'?getPath('default_picture.png'):item.edit?getPath(item.edit.thumb):item.images[0]}`"
                          alt
                          draggable="false"
                        />
                        <span class="group-img-btn love">
                          <svg-icon icon-class="love" style="margin-right:5px;" />1人喜欢
                        </span>
                      </div>
                      <div class="detail">
                        <p class="title line-hide">
                          <span style="margin-right: 5px;" class="group-img-btn">活动标签</span>这里是商品标题
                        </p>
                        <div class="subtitle line-hide flex-row flex-justify-b">
                          <span class="sub-price">
                            <span class="icon">价值:</span>20.00
                            <span class="icon">元</span>
                          </span>
                          <div class="group-btn col-list">
                            <span>抽奖中</span>
                          </div>
                        </div>
                        <div class="subtitle line-hide flex-row flex-justify-b flex-align-c">
                          <span class="sub-price line-through">
                            <span class="icon" style="white-space: nowrap;">人数满20人自动开奖</span>
                          </span>
                          <div class="group-btn">
                            <span class="sub-price line-through">
                              <span class="icon">共两份奖品</span>
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </label>
          </div>
        </div>
      </section>
    </div>
  </section>
</template>

<script>
import defaultConfig from "./utils/editConfig";
import activeChoose from "./utils/activeChoose";
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function () {
        return defaultConfig;
      },
    },
  },
  data() {
    return {
      checkAll: false,
      isIndeterminate: true,
    };
  },
  computed: {
    listitem: {
      set(value) {
        this.custormItemData.params.listitem = value;
      },
      get() {
        return this.conversionType(
          "number",
          this.custormItemData.params.listitem
        );
      },
    },
  },
  mounted() {
    // console.log("OOoOOOoOooOoo")
    // console.log(this.custormItemData)
    let data=this.custormItemData;

    // data.data.map(item=>{
    //   for(var i=0;i<data.peridosData.length;i++){
    //       if(item.luck_id==data.peridosData[i].luck_id){
    //          this.custormItemData.params.peridos.push(item)
    //       }
    //   }
    // });

    // console.log( 'xxxxxxxxxxxx', this.custormItemData.params.peridos)

    // this.custormItemData.params.peridos = [...this.custormItemData.params.peridos]

  },
  methods: {
    ...activeChoose,
    qishuChange(val_id) {

      // console.log(this.custormItemData.params.peridos)
      let val=[];
      let custormItemDataArr=this.custormItemData.data[0].luck_periods
      val_id.map(item=>{
        for(var i=0;i<custormItemDataArr.length;i++){
          if(item==custormItemDataArr[i].luck_period_id){
            val.push(custormItemDataArr[i])
          }
        }
      })
      let luckLInk = this.custormItemData.data;
      this.custormItemData.peridosData = [];
      let setPeridosData;
      if (this.custormItemData.data.length > 0) {
        for (var i = 0; i < val.length; i++) {
          this.custormItemData.data[0].luck_periods.map((item) => {
            if (item.luck_period_id == val[i].luck_period_id) {
              setPeridosData = {
                ...this.custormItemData.data[0],
                peridosOne: item,
              };
              // console.log(" setPeridosData", setPeridosData);
              //  this.setPeridosData.peridosOne = item;
              this.custormItemData.peridosData.push(setPeridosData);
              // console.log("xxxxxxxxxxxx")

              //  setPeridosData.peridosOne=item;
            }
          });
        }
      }
      console.log(this.custormItemData.peridosData);
      // this.custormItemData.peridosData[0].luck_periods.map(item=>{
      //  if(item.luck_period_id==val.luck_period_id){

      //  }
      // })
    },
    handleCheckAllChange(val) {

      let pushData=[];
      console.log( this.custormItemData.data[0].luck_periods.map(item=>{
       pushData.push(item.luck_period_id)
      }))
      this.custormItemData.params.peridos = val
        ? pushData
        : [];
      this.isIndeterminate = false;
      this.qishuChange(this.custormItemData.params.peridos)

    },
    uploadFileCallBack(files) {

      const { key } = files;

      if (key === "ChooseLink") {
        const { currentRow, displayData } = files;
        console.log(currentRow, "currentRow");
        console.log(displayData, "displayData");
        const result = [];

        let newIndex=0;
        displayData.map((listItem) => {
           newIndex = this.custormItemData.data.findIndex(
            (displayItem) => {
              return `${displayItem.luck_id}` === `${listItem.luck_id}`;
            }
          );
          console.log(newIndex);

          if (newIndex === -1) {
            const {
              luck_count,
              luck_state,
              luck_title,
              luck_id,
              luck_price,
              luck_begin_time,
              luck_like,
              luck_tag,
              luck_begin_number,
              prize,
              luck_mode,
              image,
              image_img,
              luck_periods,
              hand_text
            } = listItem;
            result.push({
              luck_count,
              luck_state,
              luck_title,
              luck_id,
              luck_price,
              prize,
              luck_begin_time,
              luck_like,
              luck_tag,
              luck_begin_number,
              luck_mode,
              image,
              image_img,
              luck_periods,
              hand_text
            });

            this.custormItemData.params.link = result[0]["luck_title"];
          }
        });
        // this.custormItemData.data=displayData;
        this.$set(this.custormItemData, "data", [
          ...this.custormItemData.data,
          ...result,
        ]);
        let luckDataIndex=this.custormItemData.data.length-1;
        let luckData=this.custormItemData.data[luckDataIndex];
          this.custormItemData.data=[];
          this.custormItemData.data.push(luckData);
          console.log(this.custormItemData.data[0])



          if( this.custormItemData.data[0].luck_periods.length===0){

 this.custormItemData.peridosData=this.custormItemData.data


          }
          if(newIndex == -1){  //是否是选中的同样的链接
  this.custormItemData.params.peridos.push(this.custormItemData.data[0].luck_periods[0].luck_period_id)  //默认选中第一期
          this.qishuChange(this.custormItemData.params.peridos)  //调用复选框改变方法，传递参数
          }


      }
    },
    uploadtoggle(type) {
      this.output({
        type,
        params: {
          editKey: this.custormItemData.key,
          link_type: "lottery",
          choose_type: this.custormItemData.params.choostype,
          showStore:this.custormItemData.params.showStore
        },
      });
      // console.log("=======2222=======");
      // console.log(this.custormItemData.data);

    },
  },
};
</script>

<style lang="scss" scoped>
.allchoose {
  // display: flex;
  // justify-content: start;
  // flex-wrap: wrap;

  overflow: hidden;

}
.chooseOne{
  margin: 5px;
   float: left;
}
.myActive {
  border: 1px solid #fb6638 !important;
}
.custorm--modelbox.marketlottery-edit {
  .luckStyleTwo {
    border-radius: 4px;
    overflow: hidden;
    width: 297px;
    .luckStyleTwoImg {
      width: 295px;
    }
  }
  .allChoose {
    display: flex;
    justify-content: space-between;
  }
  .el-tab {
    .el-radio {
      margin: 0;
    }
  }
  .es-form-item {
    border-bottom: 5px solid #f6f7f9;
    padding: 20px 23px;
    font-size: 12px;

    .uploadSource {
      background: #fff;
      cursor: pointer;
    }

    .uploadSource {
      width: 50px;
      height: 50px;
      line-height: 50px;
      margin-right: 0;
      border: 1px dashed #ededed;
      text-align: center;
      color: #dad9d9;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      float: left;
      position: relative;
    }
  }

  .group-btn {
    color: #fff;
    text-align: right;
    line-height: 22px;
    border-radius: 8px;
    font-size: 12px;
    height: 22px;
    &.col-list {
      background: #ffcc00;
      width: 70px;
      height: 25px;
      line-height: 27px;
      padding: 2px 0;
      text-align: center;
      color: #333333;
      font-weight: bold;
      box-sizing: content-box;
      border-radius: 30px;
    }
  }

  .es-form-item:last-child {
    border-bottom: 0;
  }

  .es-form-item .item-inner {
    margin-top: 8px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .es-form-item .item-inner:first-of-type {
    margin-top: 0;
  }

  .es-form-item .button-img {
    width: 32px;
    height: 32px;
    margin-right: 20px;
    cursor: pointer;
    border-radius: 4px;
    box-sizing: border-box;
    line-height: 36px;
    text-align: center;
    border: 1px solid transparent;
  }

  .es-form-item .button-img.block {
    width: 100%;
    position: relative;
    min-height: 32px;
    height: auto;
    padding: 10px;
    text-align: left;
  }

  .es-form-item .button-img.active {
    border-color: #fb6638 !important;
  }

  .es-form-item [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box;
    padding: 0;
  }

  .es-form-item .opacity-0 {
    opacity: 0;
  }

  .es-form-item .button-img .opacity-0 {
    width: 0;
    height: 0;
    position: absolute;
  }

  .es-form-item .alignC {
    text-align: center;
  }

  .es-form-item .item {
    background: #f6f7f9;
    padding: 10px 20px 10px 10px;
    border: 1px solid #eee;
    color: #999;
    position: relative;
    margin-bottom: 20px;
  }

  .es-form-item .labeltext {
    width: 40px;
    text-align: right;
    padding-right: 8px;
    color: #666;
  }

  .readonly-div {
    position: relative;
    flex-grow: 1;
  }

  .ivu-input-wrapper {
    display: inline-block;
    width: 100%;
    position: relative;
    vertical-align: middle;
    line-height: normal;
  }

  .ivu-input {
    display: inline-block;
    width: 100%;
    height: 32px;
    line-height: 1.5;
    padding: 4px 12px;
    font-size: 12px;
    border: 1px solid #ededed;
    border-radius: 4px;
    color: #333;
    background-color: #fff;
    background-image: none;
    position: relative;
    cursor: text;
    -webkit-transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
      -webkit-box-shadow 0.2s ease-in-out;
    transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
      box-shadow 0.2s ease-in-out;
  }

  .readonly-div .readonly input {
    background: #e8effc;
    border: 0;
    padding-left: 18px;
    cursor: pointer;
    box-sizing: border-box;
  }

  .readonly-div .readonly-icon {
    position: absolute;
    top: 5px;
    left: 12px;
  }

  .es-form-item .item .delete-child {
    position: absolute;
    right: 4px;
    top: 0;
    cursor: pointer;
    font-size: 14px;
  }

  //列表结束

  .edit-form-item {
    border-bottom: 5px solid #f6f7f9;
    padding: 20px 23px;
    font-size: 12px;
  }

  .edit-form-item:last-child {
    border-bottom: 0;
  }

  .el-radio__label {
    font-size: 12px;
  }

  .el-checkbox__label {
    font-size: 12px;
  }

  .form-label {
    line-height: 1;
    color: #47565d;
    font-weight: bolder;
    margin-bottom: 20px !important;
  }

  .inner {
    margin-top: 12px;
    white-space: nowrap;
  }

  .goodscol-add {
    border: 1px dashed #6b7685;
    line-height: 32px;
    height: 32px;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
  }

  .stylebox {
    background: #f6f7f9;
    padding: 10px 20px;
    border: 1px solid #eee;
    color: #999;
    margin-top: 30px;
    white-space: nowrap;
  }

  .txbox {
    border-radius: 3px;
    border: 1px solid transparent;
    margin: 0 15px 0 13px;
    padding: 5px;
    cursor: pointer;
  }

  .txbox.active {
    border-color: #fb6638;
  }

  .zft {
    background: #dcdcdc;
    height: 15px;
    width: 15px;
    border-radius: 3px;
  }

  .cft {
    background: #dcdcdc;
    height: 15px;
    width: 25px;
    border-radius: 3px;
  }

  .yuan {
    background: #dcdcdc;
    height: 15px;
    width: 15px;
    border-radius: 15px;
  }

  .select-btn-box {
    background: #e8effc;
    cursor: pointer;
    border-radius: 5px;
    padding: 0 10px;
    height: 32px;
    line-height: 32px;
    width: 60%;
  }

  .select-btn-icon {
    line-height: 32px;
    float: left;
    margin-right: 5px;
  }

  .select-btn-text {
    line-height: 32px;
    display: inline-block;
    height: 32px;
    vertical-align: middle;
  }

  .el-slider__input {
    width: 105px;
  }

  .el-slider__runway.show-input {
    margin-right: 130px;
  }

  //风格
  .es-form-item .item-inner:first-of-type {
    margin-top: 0;
  }

  .es-form-item .item-inner {
    margin-top: 8px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .block {
    display: block !important;
  }

  .es-form-item {
    border-bottom: 5px solid #f6f7f9;
    padding: 20px 23px;
    font-size: 12px;
  }

  .es-form-item.goods .button-img {
    padding: 0;
  }

  .button-img.block {
    width: 100%;
    position: relative;
    min-height: 32px;
    height: auto;
    padding: 10px;
    text-align: left;
  }

  .button-img {
    width: 32px;
    height: 32px;
    margin-right: 20px;
    cursor: pointer;
    border-radius: 4px;
    line-height: 36px;
    text-align: center;
    border: 1px solid transparent;
  }

  .flex,
  .flex-column {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .es-seckill-group {
    line-height: 1;
  }

  .es-seckill-title {
    margin: 20px 20px 6px;
    height: 22px;
    font-size: 11px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .es-seckill-title .title {
    .seckill-title {
      font-size: 16px;
      font-weight: 700;
      color: #3d404d;
      background: #fff;
    }

    font-size: 16px;

    img {
      vertical-align: middle;
      zoom: 0.5;
    }

    & + p {
      color: #999;
      margin-right: -5px;
    }
  }

  .es-seckill-title span {
    background: #fff;
    display: inline-block;
    color: #333;
    text-align: center;
    line-height: 18px;
    width: 17px;
  }

  .es-seckill-title span:first-of-type {
    width: auto;
    background: #fe504f;
    color: #fff;
    font-size: 12px;
    margin-right: 8px;
    padding: 1px 3px;
  }

  .es-seckill-group.style-row .group {
    overflow: hidden;

    & > div {
      font-size: 0;
    }
  }

  .es-seckill-group.style-row .group {
    .group-img-btn {
      display: inline-block !important;
      background: rgb(255, 215, 61);
      height: 18px;
      text-align: center;
      line-height: 16px;
      padding: 2px 5px;
      color: #000000;
      text-align: center;
      font-size: 12px;
      &.active {
        color: #ffffff;
        background: rgba(204, 204, 204, 1);
      }
      &.love {
        position: absolute;
        top: 18px;
        right: 15px;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 30px;
        height: 24px;
        line-height: 23px;
        color: #fd463e;
        padding-left: 10px;
        padding-right: 10px;
      }
    }
    .es-seckill-col {
      display: inline-block;
      padding: 20px 20px 13px;
      width: 100%;
      box-sizing: border-box;
      border-radius: 2px;
      .image {
        position: relative;
        height: 180px;
        margin: 4px 0 8px;
        width: 100%;
        border: 1px solid #e5e5e5;
        border-radius: 10px;
        img {
          height: 180px;
          width: 100%;
          object-fit: cover;
          display: block;
        }
      }
    }
  }

  .es-seckill-group.style-row .group .es-seckill-col .detail {
    width: 100%;
    font-size: 12px;
    .title {
      height: 40px;
      font-size: 14px;
    }

    .subtitle {
      line-height: 1;
      padding-bottom: 5px;
      .sub-price {
        font-size: 14px;

        .icon {
          font-size: 12px;
        }

        &:not(.line-through) {
          font-size: 20px;
          color: #fd463e;
          font-weight: 600;
        }

        &.line-through {
          color: #999;
          text-decoration: none;
        }
      }
    }

    .sales-num {
      .num {
        font-size: 14px;
        color: #999;
      }

      .progress {
        width: 50px;
        height: 10px;
        border-radius: 10px;
        line-height: 10px;
        background: rgb(242, 242, 242);

        .progress-num {
          display: inline-block;
          background: #fd463e;
          width: 40%;
          height: 10px;
          border-radius: 10px;
        }
      }

      // .sales-btn{
      //     border: 1px solid #fd463e;
      //     color: #fd463e;
      //     padding: 0 10px;
      //     border-radius: 30px;
      //     font-size: 14px;
      //     height: 26px;
      // }
    }
  }

  .es-seckill-group.style-row .group .es-seckill-col .detail .price .num {
    color: #999ca7;
    font-size: 9px;
    line-height: 25px;
    margin-left: 6px;
  }

  .es-seckill-group.style-row .group .es-seckill-col .detail .price .flex {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .es-seckill-group.style-row .group .es-seckill-col .detail .price span {
    font-size: 16px;
  }

  .es-seckill-group.style-col .group {
    overflow: hidden;

    & > div {
      white-space: nowrap;
      font-size: 0;
    }
  }

  .es-seckill-group.style-col .group .es-seckill-col {
    padding: 15px;
    box-sizing: border-box;
    border-radius: 2px;
    // border-bottom: 1px solid #999;
    padding-bottom: 12px;

    .image {
      position: relative;
      height: 85px;
      width: 85px;
      margin: 4px 0 4px;
      border-radius: 5px;

      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 10px;
        display: block;
      }
    }
  }

  .es-seckill-group.style-col .group .es-seckill-col .detail {
    width: 0;
    flex-grow: 1;
    font-size: 12px;
    margin-left: 15px;
    margin-right: 0;
    height: 80px;
    .title {
      font-size: 14px;
      // height: 40px;
      margin-bottom: 8px;
      // overflow: hidden;
      text-overflow: ellipsis;
      width: 215px;
    }
    .sales-num.col-num {
      // padding-bottom:10px;
      // border-bottom:.5px solid #e5e5e5;
    }
    .sub-price {
      font-size: 12px;

      .icon {
        font-size: 12px;
      }

      &:not(.line-through) {
        font-size: 12px;
        line-height: 2;
        color: #999999;
        font-weight: 600;
      }

      &.line-through {
        color: #999;
        text-decoration: line-through;
      }
    }
    .progress-box {
      position: relative;
      height: 15px;
      margin-bottom: 15px;

      .progress {
        width: 55%;
        height: 15px;
        border-radius: 10px;
        line-height: 16px;
        text-align: center;
        background-color: #f7cfcd;

        .progress-num {
          color: #fff;
          display: inline-block;
          height: 15px;
          border-radius: 10px;
        }
      }
    }

    .sales-num {
      .sales-btn {
        margin-left: 4px;
        border: 1px solid #fd463e;
        color: #fd463e;
        padding: 0 6px;
        border-radius: 4px;
        font-size: 14px;
        height: 26px;
      }
    }
  }

  .es-seckill-group.style-col .group .es-seckill-col .detail .price .num {
    color: #999ca7;
    font-size: 9px;
    line-height: 25px;
    margin-left: 6px;
  }

  .es-seckill-group.style-col .group .es-seckill-col .detail .price .flex {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .es-seckill-group.style-col .group .es-seckill-col .detail .price span {
    font-size: 16px;
  }
}
</style>
